<template>
  <div class="app-container">
    <!--    <div class="title">{{ typeName }}-->
    <div class="title">
      <el-button size="mini" type="primary" @click="addArticle">新增文章</el-button>
      <!--      <el-button size="mini" type="primary" @click="pushQuestions">拉取题目</el-button>-->
    </div>

    <div>
      <el-table
        :data="articleList"
        border
        size="mini"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          prop="序号"
          align="center"
          width="50"
        />
        <el-table-column
          prop="title"
          label="文章标题"
        />
        <el-table-column
          label="文章内容"
        >
          <template slot-scope="scope">
            {{ htmlToFont(scope.row.content) }}
            <span style="color: darkred;cursor: pointer" @click="showArticleDetail(scope.row.content)">查看更多</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createPerson"
          label="创建人"
          width="100"
        />
        <el-table-column
          align="center"
        >
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字，按回车键搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >移除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="divid-page-class">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalItem"
          @current-change="changePage"
        />
      </div>
    </div>
    <div>
      <el-dialog :visible.sync="articleModDialog" :title="dialogTitle" width="60%" :close-on-click-modal="false">
        <div>
          <el-form ref="form" :model="articleForm" label-width="80px">
            <el-form-item label="文章标题">
              <el-input v-model="articleForm.title" />
            </el-form-item>
            <el-form-item label="文章内容">
              <div v-show="true" id="demo1" ref="ed" />
            </el-form-item>
            <el-form-item>
              <template v-if="operatorMode == 'update'"><el-button type="primary" @click="updateArticleInfo(articleId)">更新文章</el-button></template>
              <template v-else><el-button type="primary" @click="commitArticleInfo(templateId)">立即创建</el-button></template>
              <el-button @click="articleModDialog = false">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>

import { getArticleByTemplate } from '@/api/template'
import E from 'wangeditor'
import articleMixin from '@/mixin/articleMixin'
export default {
  mixins: [articleMixin],
  data() {
    return {
      typeName: '',
      articleList: [],
      totalItem: '1',
      templateId: '',
      currentPage: 1,
      articleModDialog: false,
      dialogTitle: '',
      articleForm: {},
      editorData: '',
      articleId: '',
      operatorMode: ''
    }
  },
  mounted() {
    const queryParamas = this.$route.query
    const { templateId } = queryParamas
    this.templateId = templateId
    this.initData()
  },
  methods: {
    initData() {
      const params = {
        templateId: this.templateId,
        currentPage: this.currentPage
      }
      getArticleByTemplate(params).then(res => {
        this.articleList = res.data.records
        this.totalItem = res.data.total
      })
    },
    addArticle() {
      this.operatorMode = 'insert'
      this.addArticleForTemplate()
    },
    changePage(val) {
      this.currentPage = val
      this.initData()
    },
    handleEdit(index, row) {
      this.articleId = row.id
      this.operatorMode = 'update'
      this.articleForm.title = row.title
      this.editArticle(row)
    },
    htmlToFont(val) {
      const font = val.replace(/<[^>]*>/g, '')
      if (font.length > 30) {
        return font.slice(0, 30) + '...'
      }
      return font
    }
  }
}
</script>
